<template>
	<view>
		<view class="page">
			<view class="body"  :style="`margin-top:`+$store.state.StatusBar.statusBar + `px`">
				<view class="top-title" style="text-align: left; font-size:46rpx; font-weight: 600;">{{title}}</view>
					<!-- <view class="top-title" style="text-align: left;">{{title}}</view> -->
				<view class="list">
					<!-- @click="to('/pages/m-pages/m-world/index')" -->
					<view @click="to('/pages/m-pages/m-world/index')" >
						<image src="./img/right.png" style="width:15rpx; height:26rpx; position:absolute; right:60rpx; transform: translateY(10rpx);"></image>
						<view class="top-title" style="text-align: left; margin-left:20rpx; font-size:36rpx; font-weight: 600; margin-top:20rpx;">世界墙</view>
					</view>
					<swiper class="swiper" circular  :display-multiple-items="3" >
						<swiper-item  v-for="(item,index) in list">
							<view   class="item" >
								<image :src="item.image1" style="width:200rpx; height:260rpx; border-radius: 10rpx;" mode="aspectFill"></image>
								<view style="position: relative; transform: translateY(-60rpx); color:#fff; font-size:20rpx; padding-left:20rpx; width:150rpx; display: -webkit-box; white-space: nowrap;text-overflow: ellipsis;">{{item.message}}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				
				<view class="list">
					<view @click="to('/pages/m-pages/m-home/index')">
						<image src="./img/right.png" style="width:15rpx; height:26rpx; position:absolute; right:60rpx; transform: translateY(10rpx);"></image>
						<view class="top-title" style="text-align: left; margin-left:20rpx; font-size:36rpx; font-weight: 600; margin-top:20rpx;">旅游</view>
					</view>
					<swiper class="swiper" circular  :display-multiple-items="2" >
						<swiper-item  v-for="(item,index) in list2">
							<view   class="item" @click="goDetail(item)">
								<image :src="item.userImg" style="width:400rpx; height:260rpx; border-radius: 10rpx;" mode="aspectFill"></image>
								<view style="position: relative; transform: translateY(-60rpx); color:#fff; font-size:20rpx; padding-left:20rpx; width:150rpx; display: -webkit-box; white-space: nowrap;text-overflow: ellipsis;">{{item.destination}}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {to} from '@/utils/index.js';
	export default {
		data() {
			return {
				title: '发现',
				info: {},
				pageno: 1,
				list: [],
				list2: []
			}
		},
		onLoad(option) {
		},
		onShow(){
			// this.getInfo();
			this.getList();
			this.getList2();
		},
		methods: {
			to,
			back(){
				to()
			},
			async getList(){
				// {pageno:1,gender:1}
				let res = await this.$c.post('/app/dynamic/list?pageno='+this.pageno)
				if(res.code == 1002){
					uni.navigateTo({
					  url: '/im/login/login'
					});
				}
				for(let i in res.data){
					 res.data[i].image1 = res.data[i].image.split(',')[0]
				}
				this.list = this.list.concat(res.data)
				console.log(this.list)
				// this.pageno++;
			},
			goDetail(item){
				uni.setStorageSync("agree-item",item)
				this.to("/pages/m-pages/m-agree-detail/index")
			},
			async getList2(){
				// {pageno:1,gender:1}
				let res = await this.$c.post('/app/trip/list?pageno='+this.pageno)
				if(res.code == 1002){
					uni.navigateTo({
					  url: '/im/login/login'
					});
				}
				// for(let i in res.data){
				// 	 res.data[i].image1 = res.data[i].image.split(',')[0]
				// }
				this.list2 = this.list2.concat(res.data)
				// this.pageno++;
			},
			async getInfo(){
				// let res = await this.$c.post("/app/exchange/getList")
				// if(res.code != 0){
				// 	uni.navigateTo({
				// 	  url: '/im/login/login'
				// 	});
				// }
				// this.info = res.data
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		min-height: 100vh;
		// background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}
	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
		background-color: #fff;
		// background-color: #e3ecfb;
		z-index: 999;
		text-align: center;
		vertical-align: middle;
	}
	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}
	.top-title {
		line-height: 50rpx;
		display: block;
		height:50rpx;
		z-index: 99;
	}
	.body{
		text-align: center;
		padding:30rpx;
		
		
		.list{
			margin-top:20rpx;
			height: 300rpx;
			width:100vw;
			transform: translateX(-2vw);
			// .on{
			// 	// background-color: #ffaa7f;
			// 	background: linear-gradient(to right,#34221a,  #363113, #322119);
			// 	color:#fff;
			// }
			.item{
				display: block;
				height: 300rpx;
				text-align: center;
				border-radius: 20rpx;
			}
		}
		
		.button{
			background-color: #aa8c72;
			color:#fff;
			display: inline-block;
			padding:30rpx 0rpx;
			border-radius: 30rpx;
			font-size:32rpx;
			width:80%;
			margin-top:30rpx;
		}
		.mark{
			width:100%;
			margin-top:30rpx;
			text-align: left;
			font-size: 20rpx;
			color: #9d9395; 
		}
		.list{
			margin-top:60rpx;
			.item{
				height:80rpx;
				padding:15rpx;
				position: relative;
				.label{
					position: absolute;
					left: 40rpx;
				}
			}
		}
	}

</style>